<template>
    <div class="box">
        <!-- 视频 -->
        <div class="videoBox" v-show="showVideo">
            <video controls="" class="video" :src="`https://wwz.jingyi.icu${list.video}`"></video>
        </div>
        <!-- 头部样式 -->
        <div class="head">
            <!-- 返回 -->
            <div class="headBack">
                <div class="backItem">
                    <img src="../assets/left.png" alt="" @click="back" />
                </div>
            </div>
            <!-- 收藏、点赞 -->
            <div class="headCollect">
                <div class="backItem">
                    <img src="../assets/pentagram.png" alt="" />
                </div>
                <div class="backItem">
                    <img src="../assets/loves.png" alt="" />
                </div>
                <div class="backItem">
                    <img src="../assets/img16865418abb7caa00.png" alt="" />
                </div>
            </div>
        </div>
        <!-- 视频、图片切换 -->
        <div class="back">
            <div class="toolbar">
                <div class="backLeft">
                    <div class="leftItem">
                        <div class="itemVideo" @click="changeVideo" :style="{
            backgroundColor: showVideo ? '#fff' : '#000',
            color: showVideo ? '#000' : '#fff',
        }">
                            视频
                        </div>
                        <div class="itemImage" @click="changeImage" :style="{
            backgroundColor: showVideo ? '#000' : '#fff',
            color: showVideo ? '#fff' : '#000',
        }">
                            图片
                        </div>
                    </div>
                    <div class="leftList">相册 <img src="../assets/arrow.png" alt="" /></div>
                </div>
                <div class="backRight">
                    <img src="../assets/ghjll.png" alt="" />
                </div>
            </div>
        </div>
        <!-- 门票标题 -->
        <div class="ticket">门票</div>
        <!-- 门票标签 -->
        <div class="ticketItem">
            <div>成人</div>
            <div>儿童</div>
            <div>学生</div>
            <div>随时退</div>
            <div>无需退票</div>
        </div>
        <!-- 门票分类价格 -->
        <div class="ticketList">
            <!-- 标题 -->
            <div class="listTitle">门票</div>
            <!-- 门票列表 -->
            <div class="listItem" v-for="(item, index) in ticketList" :key="index">
                <!-- 门票列表第一行 -->
                <div class="itemOne">
                    <!-- 门票名称 -->
                    <div class="itemName">{{ item.name }}</div>
                    <!-- 原价 -->
                    <del class="originalPrice">￥{{ item.original_price }}</del>
                </div>
                <!-- 门票列表第二行 -->
                <div class="itemOne">
                    <!-- 订票日期 -->
                    <div class="itemDate">可订明日</div>
                    <!-- 现价 -->
                    <div class="currentPrice">
                        <span class="priceOne">￥</span>
                        <span class="priceTwo">{{ item.current_price }}</span>
                        <span>起</span>
                    </div>
                </div>
                <!-- 门票列表第三行 -->
                <div class="itemOne">
                    <!-- 随时退 -->
                    <div class="refund">随时退，无需退票</div>
                    <!-- 优惠 -->
                    <div class="discounts">
                        优惠￥{{ item.original_price - item.current_price }}
                    </div>
                </div>
                <!-- 门票列表第四行 -->
                <div class="itemOne">
                    <!-- 已售、购买须知 -->
                    <div class="num">
                        <span>已售{{ item.num }}</span>
                        <span class="notes">购买须知 <img src="../assets/right.png" alt="" /></span>
                    </div>
                    <!-- 预定 -->
                    <div class="reserve" @click="order(index)">预定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { Scenic } from "../api/home";
import { Ticketing } from "../api/ticket";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
console.log(route.query.id);
// 显示视频
const showVideo = ref(true);
const list = ref("");
const ticketList = ref([]);
// 景区id声明
const scenic_id = ref("");
// 门票ID声明
const ticketing_id = ref("");
console.log(ticketList.value);
// 切换图片
const changeImage = () => {
    showVideo.value = false;
};
// 切换视频
const changeVideo = () => {
    showVideo.value = true;
};
// 前往提交订单页面
const order = (index) => {
    router.push({
        path: "/order",
        query: {
            scenic_id: scenic_id.value,
            ticketing_id: ticketList.value[index].id,
            price: ticketList.value[index].current_price,
            scenic_name: list.value.name,
            ticket_name: ticketList.value[index].name,
        },
    });
};
// 返回首页
const back = () => {
    router.push({
        path: "/home",
    });
};
//请求景区列表信息接口
Scenic().then((res) => {
    console.log(res);
    list.value = res.data[4];
    console.log(list.value);
});
//请求售票列表信息接口
Ticketing({
    scenic_id: route.query.id,
}).then((res) => {
    console.log(res);
    for (let index = 0; index < res.data.length; index++) {
        if (res.data[index].children) {
            for (let j = 0; j < res.data[index].children.length; j++) {
                ticketList.value.push(res.data[index].children[j]);
                console.log(ticketList.value);
                scenic_id.value = res.data[index].children[j].scenic_id;
                console.log(scenic_id.value);
            }
        }
    }
});
</script>

<style scoped>
.box {
    background-color: #f4f4f4;
    width: 100%;
    height: 100vh;
}

/* 视频div */
.videoBox {
    width: 100%;
    position: absolute;
    z-index: 9;
}

.video {
    width: 100%;
    height: auto;
}

/* 头部样式 */
.head {
    width: 100%;
    padding-bottom: 6.5px;
    padding-top: 6.5px;
    height: 34px;
    z-index: 11;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.1);
}

/* 返回 */
.headBack {
    padding-left: 10px;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.backItem {
    background-color: rgba(49, 49, 49, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20px;
    height: 26px;
    width: 26px;
}

/* 返回图片 */
.backItem img {
    width: 22px;
    height: 22px;
}

/* 点赞、收藏 */
.headCollect {
    padding-right: 10px;
    padding-left: 10px;
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 图片背景 */
.back {
    background-image: url("../assets/headerBg.webp");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 230px;
    position: relative;
}

/* 视频、图片、相册导航栏 */
.toolbar {
    display: flex;
    align-items: center;
    color: white;
    justify-content: space-between;
    position: absolute;
    bottom: -35px;
    width: 96%;
    margin-left: 2%;
    z-index: 10;
}

/* 视频图片栏 */
.backLeft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
}

.leftItem {
    display: flex;
    background-color: #383535;
    align-items: center;
    justify-content: space-around;
    width: 88px;
    height: 27px;
    border-radius: 20px;
    transition: all 0.5s;
}

.itemVideo {
    background-color: white;
    color: black;
    font-size: 13px;
    border-radius: 25px;
    width: 44px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 2px;
}

.itemImage {
    background-color: #383535;
    color: white;
    font-size: 13px;
    border-radius: 25px;
    width: 44px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 2px;
}

/* 相册 */
.leftList {
    background-color: #383535;
    font-size: 13px;
    border-radius: 20px;
    width: 70px;
    opacity: 0.7;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6.5px;
    line-height: 0px;
}

.leftList img {
    width: 24px;
    height: 24px;
}

/* 扬声器 */
.backRight {
    background-color: #1d1b1b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 55px;
}

.backRight img {
    width: 15px;
    height: 15px;
}

/* 门票 */
.ticket {
    font-size: 20px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
    margin-top: 42px;
}

.ticketItem {
    display: flex;
    padding-left: 16px;
    width: 70%;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-top: 6.5px;
}

.ticketItem div {
    background-color: white;
    border-radius: 6px;
    padding-left: 6.5px;
    padding-top: 8px;
    padding-right: 6.5px;
    padding-bottom: 8px;
}

/* 门票分类价格 */
.ticketList {
    width: 96%;
    border-radius: 6px;
    margin-top: 16px;
    padding-bottom: 32px;
    margin-left: 2%;
    background-color: white;
}

/* 标题 */
.listTitle {
    font-size: 20px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 6px;
    padding-bottom: 20px;
}

.listItem {
    line-height: 24px;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e2e2;
}

.itemOne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 13px;
}

/* 门票名称 */
.itemName {
    font-weight: 600;
    font-size: 13px;
}

/* 原价 */
.originalPrice {
    font-size: 13px;
    color: #505050;
}

/* 订票日期 */
.itemDate {
    color: #0a79f5;
    font-size: 13px;
}

/* 现价 */
.currentPrice {
    display: flex;
    align-items: center;
}

/* 现价单位 */
.priceOne {
    font-size: 13px;
    color: #ff5733;
}

/* 现价 */
.priceTwo {
    font-size: 18px;
    color: #ff5733;
}

/* 退票 */
.refund {
    color: #0a79f5;
    font-size: 13px;
}

/* 优惠 */
.discounts {
    font-size: 13px;
    color: #ff5733;
    border: 1px solid #ff5733;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 2px;
}

/* 数量 */
.num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 40%;
}

.notes {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.num img {
    width: 15px;
    height: 15px;
}

/* 预定 */
.reserve {
    color: white;
    background-color: #ff5733;
    border-radius: 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 30px;
}
</style>